<template>
    <!-- 单位登录 -->
    <div class="box-unit">
        <el-form :model="form" :rules="rules" ref="ruleFormRef" hide-required-asterisk="true" class="box-input">
            <el-form-item label="账号" prop="mobile">
                <el-input v-model="form.mobile" placeholder="请输入手机号" />
            </el-form-item>

            <el-form-item label="密码" prop="password" class="box-input-pass">
                <el-input v-model="form.password" show-password placeholder="请输入密码" />
            </el-form-item>

            <div class="box-but">
                <!--checked 当前是否勾选 -->
                <input type="checkbox" :checked="agreement" @click="agreementBut" style="cursor: pointer;" />
                <p>已阅读并同意青海无人机综合管理服务平台 <span>《用户协议》</span></p>
            </div>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
            </el-form-item>
        </el-form>

        <div class="box-link">
            <router-link to="/registered" class="box-router-link">个人注册</router-link>
            <router-link to="/retrievepassword" class="box-router-link">忘记密码</router-link>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { FormRules } from "element-plus/es/tokens/form";
import { onMounted, reactive, ref } from "vue";
import type { userType } from "@/hooks/type";
import type { FormInstance } from "element-plus/es/components/form";
import { Http } from "@/api/api";
import { useRouter } from "vue-router";
import { reg } from "@/hooks/validate";
import { ElMessage } from "element-plus";

const form = reactive<userType>({});
const ruleFormRef = ref<FormInstance>();
const router = useRouter();
const agreement = ref(false);

// 协议点击
const agreementBut = () => {
    agreement.value = !agreement.value;
};

// 表单验证
const rules = reactive<FormRules>({
    mobile: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { pattern: reg.pwd, message: "请输入6-16位数字加字母密码" },
    ],
});

// 登录
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(async (valiid: boolean) => {
        if (valiid) {
            console.log(form);
            if (!agreement.value) {
                ElMessage({
                    message: "请先勾选用户协议",
                    type: "error",
                });
            } else {
                let res = (await Http.personalLogin(form)) as unknown as userType;
                if (res.status == 0) {
                    router.push('/home')
                    ElMessage({
                        message: "登录成功",
                        type: "success",
                    });
                } else {
                    ElMessage({
                        message: "账号或者密码错误",
                        type: "warning",
                    });
                }
            }
        }
    });
};

onMounted(() => {
    submitForm;
});
</script>

<style lang="scss" scoped>
// <!-- 个人登录 -->

.box-unit {
    width: 345px;
    height: 210px;
    margin: 0 auto;

    // input框样式
    .box-input {
        width: 345px;

        ::v-deep .el-form-item {
            width: 345px;

            .el-form-item__label {
                font-size: 13px;
                padding-right: 18px;
            }
        }

        .el-input {
            width: 100%;

            ::v-deep .el-input__wrapper {
                font-size: 12px;
                background-color: rgb(245, 248, 250);
            }
        }

        .box-input-pass {
            margin-bottom: 10px;
        }
    }

    // 用户协议样式
    .box-but {
        width: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15px 0;
        cursor: pointer;

        p {
            font-size: 13px;
            color: rgb(118, 118, 118);

            span {
                color: rgb(0, 0, 0);
            }
        }
    }

    // 确认按钮样式
    .el-button {
        background-color: rgb(81, 113, 255);
        width: 345px;
        height: 38px;
        line-height: 40px;
        font-size: 18px;
        margin: 0 auto;
    }

    ::v-deep .el-form-item__content {
        margin: 0px !important;
    }

    // 注册，找回
    .box-link {
        width: 345px;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;

        .box-router-link {
            color: rgb(82, 82, 82);
            font-size: 14px;
        }
    }
}
</style>
